<template>
    <div class="app-container" ref="appContainer">
        <div class="header">
            <!-- <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
          <el-form-item label="请输入联盟ID">
            <el-input v-model="inputSearch.searchId" :placeholder="`请输入联盟ID`" clearable />
          </el-form-item>
        </el-form>
        <div class="search">
          <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
        </div> -->
        </div>

        <!-- ------------表格--------------->
        <div class="table">
            <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
                <el-table-column label="id" align="center" prop="id" width="125px">
                </el-table-column>

                <el-table-column label="头像" width="90px" align="center">
                    <template #default="scope">
                        <el-avatar :size="80" :src="scope.row.face">
                            <img src="@/assets/image/userlogo.png" />
                        </el-avatar>
                    </template>
                </el-table-column>




            </el-table>

        </div>

        <!-- ------------分页--------------->
        <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
          @pagination="getList" /> -->

        <!-- ------------分页--------------->
        <div class="pagination">
            <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
                layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
                @current-change="getList" />
        </div>



    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, fa, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { GameConfig } from '@/config/GameConfig'
import { DateUtil } from '@/engine/util/DateUtil'
import { Base64Helper } from '@/engine/util/Base64Helper'
import { GroupInfo } from '@/store/model/GroupInfo'
import { useRouter } from 'vue-router'
import { Config } from '@/config/Config'
const router = useRouter()
const loading = ref(true)
const appContainer = ref(null)


const inputSearch = reactive({
    searchId: "" + GroupInfo.instance.id,
})

//列表查询选项
const listQuery = reactive({
    pagenum: 1, //第几页
    pagesize: 50, //一页多少个
})

let list = reactive([
    {

    }
])
let pageObj = reactive({
    total: 10000
})

const dialogVisible = ref(false)
const chargeForm = reactive({

})



onMounted(() => {

    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        loading.value = false
    }, 500)
    getList()
})


const onclickSearch = () => {
    Logger.log('onclickSearch!', listQuery)
    list.splice(0)
    for (let i = 0; i < listQuery.pagesize; i++) {
        let id:number =  (i + 1) + (listQuery.pagenum - 1) * listQuery.pagesize
        let face:string = Config.getHttpHeadUrl()+""+id+".jpg"
        let data: object = {
            "id":id,
            "face":face
        }
        list[i] = data
    }

}

const handleSizeChange = (val: number) => {
    listQuery.pagesize = val
    getList()
}


const getList = () => {
    // loading.value = true;
    onclickSearch()
}






</script>
      
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
      